<!-- <template>
	<view class="container">
		<view class="header">
			<text class="title">待办事项</text>
			<view class="statistics">
				<view class="stat-item completed">
					<text class="label">已完成</text>
					<text class="value">{{ over }}</text>
				</view>
				<view class="stat-item pending">
					<text class="label">未完成</text>
					<text class="value">{{ notover }}</text>
				</view>
			</view>
		</view>

		<view class="input-box">
			<wd-input type="text" v-model="title" placeholder="请输入新的待办事项..." class="todo-input" />
			<wd-button @click="addTodo(title)" class="add-btn">添加</wd-button>
		</view>

		<view class="todo-list">
			<view class="todo-item" v-for="(item, index) in todoList" :key="item.id"
				:class="{ 'completed-item': item.completed }">
				<text class="todo-text">{{ item.title }}</text>
				<view class="todo-actions">
					<wd-checkbox v-model="item.completed" class="todo-checkbox"
						@change="handleOver(item,index)"></wd-checkbox>
					<wd-button icon="edit-outline" type="icon" @click="handleEdit(item, index)"></wd-button>
					<wd-button icon="delete" type="icon" @click="delTodo(item.id)" class="delete-btn"></wd-button>
				</view>
			</view>

			<view class="empty-state" v-if="todoList.length === 0">
				<view class="empty-icon">📋</view>
				<text class="empty-text">还没有待办事项</text>
				<text class="empty-hint">添加你的第一个待办吧~</text>
			</view>
		</view>

		<wd-overlay :show="isEdit">
			<view class="overlay-content">
				<wd-form ref="form" :model="todoForm">
					<view class="form-title">编辑待办</view>
					<wd-cell-group border>
						<wd-input label="标题" label-width="100rpx" prop="title" clearable v-model="todoForm.title"
							placeholder="请输入标题" :rules="[{ required: true, message: '请填写标题' }]" />
						<wd-cell title="完成" title-width="100rpx" prop="complete" center>
							<view style="text-align: left">
								<wd-switch v-model="todoForm.completed" />
							</view>
						</wd-cell>
					</wd-cell-group>
					<view class="footer">
						<wd-button type="primary" size="large" form-type="submit" @click="updateTodo"
							block>提交</wd-button>
						<wd-button type="default" size="large" @click="closeEdit" block
							style="margin-top: 20rpx;">取消</wd-button>
					</view>
				</wd-form>
			</view>
		</wd-overlay>
	</view>
</template>

<script setup>
	import {
		ref,
		watchEffect,
		onMounted
	} from 'vue'
	import http from '/utils/request'

	const todoList = ref([])
	const title = ref('')
	const over = ref(0)
	const notover = ref(0)
	const isEdit = ref(false)
	const editIndex = ref(-1)
	const todoForm = ref({
		id: 0,
		title: '',
		completed: false
	})

	function getTodoList() {
		http.get('/todos')
			.then(res => {
				todoList.value = res
			})
			.catch(err => {
				console.error(err)
			})
	}

	function addTodo(text) {
		if (!text.trim()) return
		http.post('/todos', {
				title: text.trim(),
				completed: false
			})
			.then(res => {
				todoList.value.unshift(res)
				title.value = ''
			})
			.catch(err => {
				console.error(err)
			})
	}

	function delTodo(id) {
		http.delete('/todos/' + id)
			.then(res => {
				todoList.value = todoList.value.filter(item => item.id !== id)
			})
			.catch(err => {
				console.error(err)
			})
	}

	function handleEdit(item, index) {
		editIndex.value = index
		todoForm.value = {
			...item
		}
		isEdit.value = true
	}

	function updateTodo() {
		if (editIndex.value === -1) return
		http.patch(`/todos/${todoForm.value.id}`, {
				title: todoForm.value.title,
				completed: todoForm.value.completed
			})
			.then(res => {
				todoList.value.splice(editIndex.value, 1, {
					...res
				})
				closeEdit()
			})
			.catch(err => {
				console.error(err)
			})
	}

	function handleOver(item, index) {
		http.patch(`/todos/${item.id}`, {
				title: item.title,
				completed: item.completed
			})
			.then(res => {
				getTodoList()
			})
			.catch(err => {
				console.error(err)
			})
	}

	function closeEdit() {
		isEdit.value = false
		editIndex.value = -1
		setTimeout(() => {
			todoForm.value = {
				id: 0,
				title: '',
				complete: false
			}
		}, 1000)
	}

	watchEffect(() => {
		over.value = todoList.value.filter(item => item.completed).length
		notover.value = todoList.value.length - over.value
	})

	onMounted(() => {
		getTodoList()
	})
</script>

<style lang="scss">
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx;
	}

	.header {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.statistics {
		display: flex;
		gap: 20rpx;
	}

	.stat-item {
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
	}

	.stat-item.completed {
		background-color: #e6f7ee;
	}

	.stat-item.pending {
		background-color: #fff7e6;
	}

	.label {
		font-size: 24rpx;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-item.completed .label {
		color: #00b42a;
	}

	.stat-item.pending .label {
		color: #ff7d00;
	}

	.value {
		font-size: 32rpx;
		font-weight: bold;
	}

	.stat-item.completed .value {
		color: #00811f;
	}

	.stat-item.pending .value {
		color: #e56700;
	}

	.input-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}

	.todo-input {
		flex: 1;
		border: 2rpx solid #e5e7eb;
		border-radius: 12rpx;
		padding: 5rpx 24rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.add-btn {
		height: 90rpx;
		min-width: 140rpx;
		background-color: #2c6ecb;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.add-btn:active {
		background-color: #1d5bbf;
	}

	.todo-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.todo-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		transition: all 0.2s;
	}

	.todo-item.completed-item {
		background-color: #f9fafb;
	}

	.todo-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.todo-item.completed-item .todo-text {
		color: #9ca3af;
		text-decoration: line-through;
	}

	.todo-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.todo-checkbox {
		width: 40rpx;
		height: 40rpx;
	}

	.delete-btn {
		width: 50rpx;
		height: 50rpx;
		color: #f53f3f;
	}

	.delete-btn:active {
		background-color: rgba(245, 63, 63, 0.1);
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 0;
		color: #9ca3af;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 24rpx;
	}

	.empty-text {
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.empty-hint {
		font-size: 24rpx;
		color: #d1d5db;
	}

	.overlay-content {
		width: 80%;
		max-width: 500rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 30%;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.footer {
		margin-top: 30rpx;
	}

	wd-input {
		width: 100%;
	}
</style> -->



<template>
	<view class="container">
		<view class="header">
			<text class="title">待办事项</text>
			<view class="statistics">
				<view class="stat-item completed">
					<text class="label">已完成</text>
					<text class="value">{{ over }}</text>
				</view>
				<view class="stat-item pending">
					<text class="label">未完成</text>
					<text class="value">{{ notover }}</text>
				</view>
			</view>
		</view>

		<view class="input-box">
			<wd-input type="text" v-model="title" placeholder="请输入新的待办事项..." class="todo-input" />
			<wd-button @click="addTodo(title)" class="add-btn">添加</wd-button>
		</view>

		<todo-list :todos="todoList" @update="handleEdit" @delete="delTodo"></todo-list>

		<wd-overlay :show="isEdit">
			<view class="overlay-content">
				<wd-form ref="form" :model="todoForm">
					<view class="form-title">编辑待办</view>
					<wd-cell-group border>
						<wd-input label="标题" label-width="100rpx" prop="title" clearable v-model="todoForm.title"
							placeholder="请输入标题" :rules="[{ required: true, message: '请填写标题' }]" />
						<wd-cell title="完成待办" title-width="100rpx" prop="complete" center>
							<view style="text-align: left">
								<wd-switch v-model="todoForm.complete" />
							</view>
						</wd-cell>
					</wd-cell-group>
					<view class="footer">
						<wd-button type="primary" size="large" form-type="submit" @click="updateTodo"
							block>提交</wd-button>
						<wd-button type="default" size="large" @click="closeEdit" block
							style="margin-top: 20rpx;">取消</wd-button>
					</view>
				</wd-form>
			</view>
		</wd-overlay>
	</view>
</template>

<script>
	import {
		watch
	} from 'vue'
	import todoListVue from '../../components/todo-list/todo-list.vue'

	export default {
		components: {
			todoList: todoListVue,
		},
		data() {
			return {
				todoList: [],
				title: '',
				over: 0,
				notover: 0,
				isEdit: false,
				editIndex: -1,
				todoForm: {
					id: 0,
					title: '',
					complete: false
				}
			}
		},
		methods: {
			addTodo(text) {
				if (!text.trim()) return
				this.todoList.unshift({
					id: Date.now(),
					title: text.trim(),
					complete: false
				})
				this.title = ''
			},
			delTodo(id) {
				this.todoList = this.todoList.filter(item => item.id !== id)
			},
			handleEdit(item, index) {
				this.editIndex = index
				this.todoForm = {
					...item
				}
				this.isEdit = true
			},
			closeEdit() {
				this.isEdit = false
				this.editIndex = -1
				this.todoForm = {
					id: 0,
					title: '',
					complete: false
				}
			},
			updateTodo() {
				if (this.editIndex === -1) return
				this.todoList.splice(this.editIndex, 1, {
					...this.todoForm
				})
				this.closeEdit()
			},
			statistic() {
				this.over = this.todoList.filter(item => item.complete).length
				this.notover = this.todoList.length - this.over
			}
		},
		watch: {
			todoList: {
				deep: true,
				handler() {
					this.statistic()
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx;
	}

	.header {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.statistics {
		display: flex;
		gap: 20rpx;
	}

	.stat-item {
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
	}

	.stat-item.completed {
		background-color: #e6f7ee;
	}

	.stat-item.pending {
		background-color: #fff7e6;
	}

	.label {
		font-size: 24rpx;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-item.completed .label {
		color: #00b42a;
	}

	.stat-item.pending .label {
		color: #ff7d00;
	}

	.value {
		font-size: 32rpx;
		font-weight: bold;
	}

	.stat-item.completed .value {
		color: #00811f;
	}

	.stat-item.pending .value {
		color: #e56700;
	}

	.input-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}

	.todo-input {
		flex: 1;
		border: 2rpx solid #e5e7eb;
		border-radius: 12rpx;
		padding: 5rpx 24rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.add-btn {
		height: 90rpx;
		min-width: 140rpx;
		background-color: #2c6ecb;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.add-btn:active {
		background-color: #1d5bbf;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 24rpx;
	}

	.empty-text {
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.empty-hint {
		font-size: 24rpx;
		color: #d1d5db;
	}

	.overlay-content {
		width: 80%;
		max-width: 500rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 30%;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.footer {
		margin-top: 30rpx;
	}

	wd-input {
		width: 100%;
	}
</style>